<template>
  <div>
    <avue-form :option="option" @submit="submit" v-model="menuForm">
      <template #menusID="scoped">
        <el-checkbox-group v-model="menuForm.menusID" class="flex flex-wrap">
          <el-checkbox
            :label="item.menuId"
            size="large"
            v-for="item in scoped.column.dicData"
            :key="item.menuId"
            class="w-1/9"
            >{{ item.menuName }}
          </el-checkbox>
        </el-checkbox-group>
      </template>
      <template #menu-form="{ size }">
        <el-button :size="size" type="danger" @click="close">关闭</el-button>
      </template>
    </avue-form>
  </div>
</template>
<script setup name="ShortcutMenu">
import { getMenuList, saveSelfMenuConfig } from '@/api/shortcutMenu.js'
const { proxy } = getCurrentInstance()
const menuForm = ref([])
const option = reactive({
  submitText: '保存',
  column: [
    {
      label: '菜单',
      prop: 'menusID',
      type: 'checkbox',
      all: true,
      span: 24,
      props: {
        label: 'menuName',
        value: 'menuId'
      },
      rules: [
        {
          required: true,
          message: '请选择菜单',
          trigger: 'change'
        }
      ],
      dicData: []
    }
  ]
})
/**
 * 初始化
 */
const init = () => {
  //   获取菜单权限的数据
  getMenuList('C').then(res => {
    option.column[0].dicData = res.data
    // 获取选中的数据
    menuForm.value.menusID = getChild(res.data, [])
  })
}
init()
/** 提交按钮 */
const submit = (form, done) => {
  saveSelfMenuConfig({ menuIds: form.menusID.toString() }).then(res => {
    proxy.$modal.msgSuccess('提交成功')
    done()
  })
}
// 获取选中的id
const getChild = (nodes, arr) => {
  for (let el of nodes) {
    if (el.isSelf == '1') {
      arr.push(el.menuId)
    }
  }
  return arr
}
/** 关闭按钮 */
const close = () => {
  proxy.$tab.closePage()
}
</script>
